import QtQuick
import QtQuick.Window
import OpenGLMap
import ImageAxis
import ImageColorBar
// import OpenGLCudaMap



Item{
    id: fluxmap_root
    anchors.fill: parent

    visible: true

    property alias visible_: fluxmap_root.visible
    property alias max_value: color_bar.max_tick
    property alias receiver_width: x_axis.max_tick
    property alias receiver_height: y_axis.max_tick

    required property int x_
    required property int y_
    required property int width_
    required property int height_

    property int img_resolution_x_
    property int img_resolution_y_

    signal updateImage()


    


    

        
        
    

    // 这个map的坐标系统是整个窗口，最好单独放
    Map{
        id: map
        display_x: x_
        display_y: y_
        display_width: width_
        display_height: height_
        img_resolution_x: img_resolution_x_
        img_resolution_y: img_resolution_y_
    }

    
    // 透明的矩形框，放到显示的map图片的外面，为了方便定位坐标轴及colorbar的大小
    Rectangle{      
        id: rect_map
        x: 10
        y: 10
        width: 200 
        height: 78

        color: "transparent"

        // border.width: 2
        // border.color: "blue"

        onXChanged:{
            if(rect_map.x !== map.x_offset )
            {
                // map.x_offset = rect_map.x
                map.setPos(rect_map.x, rect_map.y)
            }
        }
        onYChanged:{
            if(rect_map.y !== map.y_offset )
            {
                // map.y_offset = rect_map.y
                map.setPos(rect_map.x, rect_map.y)
            }
        }
        
        

    }

    Connections{
        target: map

        onImgWidthChanged:{
            if(rect_map.width!== map.img_width)
            {
                console.log("---onImgWidthChanged()  change to " + map.img_width)
                rect_map.width = map.img_width
            }
            
        }
        onImgHeightChanged:{
            if(rect_map.height !== map.img_height)
            {
                console.log("---onImgHeightChanged()  change to " + map.img_height)
                rect_map.height = map.img_height
            }
            
        }
        
        onXOffsetChanged:{
            if(rect_map.x !== map.x_offset)
            {
                console.log("---onXOffsetChanged()  change to " + map.x_offset)
                rect_map.x = map.x_offset
            }
            
        }
        onYOffsetChanged:{
            if(rect_map.y !== map.y_offset)
            {
                console.log("---onYOffsetChanged()  change to " + map.y_offset)
                rect_map.y = map.y_offset
            }
            
        }

        onMapCompletedSignal:{
            console.log("===============map completed=======================")
            
            // x_axis.rePaint();
            // y_axis.rePaint();
            // color_bar.rePaint();
            
        }

        // onDisplayX
        // OnImageCompleted:{
        //     console.log("===============image completed=======================")
        // }


    }
    

    function updateImageInMap()
    {
        // map.updateImage();
        console.log("qml updateImageInMap");
        // 先从cudadataptr中生成新的纹理
        // map.setCudaDataPtr( algorithmProcessor.getCudaDataImage(),      
        //                     fluxMapParameter.pixel_num_x, 
        //                     fluxMapParameter.pixel_num_y, 
        //                     fluxMapParameter.maximum_flux*1000) ;
        map.generateTexture(algorithmProcessor.getFluxMapData(),
                            fluxMapParameter.pixel_num_x, 
                            fluxMapParameter.pixel_num_y      ) ;
        // 再设置可见
        // map.setVisible(true);
        
        // console.log("rect_map   x:"+rect_map.x + "  y:"+rect_map.y+ "  width:"+rect_map.width + "  height:"+rect_map.height)
        // console.log("map   win_x:"+map.win_x + "  win_y:"+map.win_y+ "  win_width:"+map.win_width + "  win_height:"+map.win_height)
        console.log("map   x:" + map.x + " y:" + map.y + " width:" + map.width + " height:" + map.height)
        // x_axis.rePaint();
        x_axis.item_visible = true;
        y_axis.item_visible = true;
        color_bar.item_visible = true;

    }

    /**
        !!!设置可见性
            在图片显示后设置axis和colorbar可见
    */

    AutoAxis{
        id: x_axis
        offset: 20
        axis_length: rect_map.width

        anchors.top: rect_map.bottom
        anchors.topMargin: 10

        anchors.right: rect_map.right
        anchors.rightMargin: -x_axis.offset
        anchors.left: rect_map.left
        anchors.leftMargin: -x_axis.offset

        width: x_axis.axis_length + 2 * x_axis.offset       // 需要手动设置width、height，否则不会实例化，也不会调用paint函数
        height: 40
        // x: 20
        // y: 20
        // width: 100

        // visible: true
        horizontal: true
        
        // Component.onCompleted:{
        //     console.log("x axis: x-" + x_axis.x + "  y-" + x_axis.y);
        // }

    }

    
    
    AutoAxis{
        id: y_axis
        offset: 20
        axis_length: rect_map.height

    
        anchors.top: rect_map.top
        anchors.topMargin: -y_axis.offset
        anchors.bottom: rect_map.bottom
        anchors.bottomMargin: -y_axis.offset

        anchors.right: rect_map.left
        anchors.rightMargin: 10


        width: 40
        height: y_axis.axis_length + 2 * y_axis.offset

        // visible: true
        horizontal: false
        
        Component.onCompleted:{
            console.log("y axis: x-" + y_axis.x + "  y-" + y_axis.y);
        }
        

    }
   
    AutoColorBar
    {
        id: color_bar
        offset: 20
        bar_width: 20
        bar_height: rect_map.height

        anchors.top: rect_map.top
        anchors.topMargin: -color_bar.offset
        anchors.bottom: rect_map.bottom
        anchors.bottomMargin: -color_bar.offset

        anchors.left: rect_map.right
        anchors.leftMargin: 10

        width: 50
        height: color_bar.bar_height + 2*color_bar.offset

        

        
    }

    Connections{
        target: x_axis

        onVisibleChanged:{
            x_axis.rePaint();
        }
    }
    Connections{
        target: y_axis

        onVisibleChanged:{
            y_axis.rePaint();
        }
    }
    Connections{
        target: color_bar

        onVisibleChanged:{
            color_bar.rePaint();
        }
        onWidthChanged:{
            map.img_boundary_horizontal_dst = color_bar.width + 10      // 10为leftMargin
        }
    }

    MouseArea{
        id: map_scale_drag_area
        anchors.fill: parent

        // // 鼠标左键拖拽
        // drag.target: fluxmap_root
        // acceptedButtons: Qt.LeftButton
        drag.target: rect_map
        acceptedButtons: Qt.LeftButton


        // 使用滚轮缩放
        onWheel:{
            console.log("wheel.angleDelta:" + wheel.angleDelta);
            var temp = wheel.angleDelta.y / 120;
            console.log("temp:" + temp)
            var scale = map.t
            scale = scale * (1.0 + temp/10.0)
            map.setScale(scale)
        }


    }

  

}